import React from 'react'
import { Line } from '@ant-design/charts';


export default function Index() {


    const data = [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
    ];
    const config = {
        data,
        xField: 'year',
        yField: 'value',
        point: {
            sizeField: 4,
        },
        interaction: {
            tooltip: {
                marker: false,
            },
        },
        style: {
            lineWidth: 2,
        },
    };


    return (
        <div style={{ width: '100%' }}>
            <h3>数据可视化</h3>
            <div style={{ width: 600, height: 300 }}>
                <Line {...config} />
            </div>

        </div>
    )
}
